<template>
	<view class="type-card type-scenic" @click.stop="pageToScenicDetail(itemData.type_data.jump_target_id)">
		<view :style="{ 'background-image': 'url(' + itemData.cover_url + ')' }" class="scenic-img" />
		<view class="scenic-content">
			<view class="fs-28 font-500 text-ellipsis">{{ itemData.name }}</view>
			<view class="auto-wrap">
				<view class="flex-c">
					<image class="img mr-4" :src="itemData.cover_url"></image>
					<view class="author-name text-ellipsis">{{ itemData.author }}</view>
				</view>
				<view class="love-box flex-c">
					<image class="icon-love" :src="imgBaseUrl + 'love-active-icon.png'" />
					<view class="love-num ml-4">2140</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
import { pageToScenicDetail } from "@/utils/page-redirect"
const imgBaseUrl = inject("imgBaseUrl")

const props = defineProps({
	itemData: {
		type: Object,
		default: () => ({}),
	},
})
</script>
<style lang="scss" scoped>
.type-card {
	border-radius: 16rpx;
	overflow: hidden;
	position: relative;
}
.type-scenic {
	.scenic-img {
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		height: 342rpx;
		background-position: center center;
		background-size: cover;
	}
	.scenic-content {
		padding: 16rpx 20rpx;
		border-bottom-left-radius: 16rpx;
		border-bottom-right-radius: 16rpx;
		.score-wrap {
			border-radius: 8rpx;
			padding: 6rpx 8rpx;
			background: rgba(245, 63, 63, 0.1);
			.icon-star {
				width: 24rpx;
				height: 28rpx;
			}
		}
		.tag-wrap {
			border-radius: 8rpx;
			color: $brown-7c;
			padding: 6rpx 8rpx;
			background: rgba(255, 180, 0, 0.1);
		}
		.auto-wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;
			.img {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
			}
			.author-name {
				color: #86909c;
				width: 150rpx;
			}
			.love-box {
				display: flex;
				color: #86909c;
				.icon-love {
					width: 20rpx;
					height: 17.6rpx;
				}
			}
		}
	}
}
.font-900 {
	font-weight: 900;
}
.line-through {
	text-decoration: line-through;
}
</style>
